import React from 'react' ;
import ReactDOM from 'react-dom';
import headScss from '@/css/head.scss'


class App extends React.Component{
	constructor(){
		super()
		this.state={
			list:[
				{id:1,name:"鱼香肉丝",price:12,num:0,flag:0},
				{id:2,name:"宫保鸡丁",price:14,num:0,flag:0},
				{id:3,name:"土豆丝",price:10,num:0,flag:0},
				{id:4,name:"米饭",price:2,num:0,flag:0}
			],
			arr:[]
		}
	}
	//加入购物车
	show(k){
		var list=this.state.list;
		list[k].flag=!list[k].flag
		list[k].num=list[k].num+1
		var arr=this.state.arr;
		arr.push(list[k])
		this.setState({
			list:list,
			arr:arr
		})

	}
	//数量加
	add(k,id){
		var list=this.state.list
		var arr=this.state.arr
		for(var i in arr){
			if(arr[i].id==id){
				arr[i].num++;
			}
		}
			this.setState({
				list:list
			})
	}
	//数量减
	cut(k,id){
		var list=this.state.list
		var arr=this.state.arr
		for(var i in arr){
			if(arr[i].id==id){
				arr[i].num--;
				if(arr[i].num<=0){
				arr[i].num=0;
				arr[i].flag=!arr[i].flag
				arr.splice(i,1)
				}
			}
		}
			this.setState({
				list:list
			})
	}
	//删除一条
   del(k,id){
   	  var arr=this.state.arr
   	  var list=this.state.list
      for(var i in list){
			if(list[i].id==id){
   				list[i].num=0
				arr.splice(k,1)
				list[i].flag=!list[i].flag
			}
		}
			this.setState({
				list:list,
				arr:arr
			})
   }
   //清空
   remove(){
   	 var list=this.state.list
   	for(var i in list){
   		if(list[i].flag){
   			list[i].num=0
   			list[i].flag=!list[i].flag
   		}
   	}
   	this.setState({
				arr:[],
				list:list
			})
   }
   
   //总数
    allnum(){
   	var num = 0;
   	var list =this.state.list
   	for(var i in list){
   		num+=list[i].num
   	}
   	return num;
   }
    //总价
       allprice(){
   	var num = 0;
   	var list =this.state.list
   	for(var i in list){
   		num+=list[i].price*list[i].num
   	}
   	return num;
   }
   render(){
   	return (
   		<div className={headScss.heads}>
				<p className={headScss.p1}>Vuex购物车</p>
				<p className={headScss.p2}>商品信息</p>
				<table>
					<thead>
						<tr>
							<th>id</th>
							<th>名称</th>
							<th>价格</th>
							<th>数量</th>
							<th>Actions</th>
						</tr>
					</thead>
					<tbody>
					  {this.state.list.map((item,key)=>{return(
					  	<tr key={ key }>
							<td>{item.id}</td>
							<td>{item.name}</td>
							<td>{item.price}</td>
							<td>{item.num}</td>
							<td>
								<div className={headScss.cart}>
									<span style={item.flag?{display:"none"}:{ display: "block"}} onClick={()=>{this.show(key)}}>加入购物车</span>
									<div className={headScss.dian} style={!item.flag?{display:"none"}:{display:"block"}}>
										<div onClick={()=>{this.add(key,item.id)}}>+</div>
										<div onClick={()=>{this.cut(key,item.id)}}>-</div>
									</div>
								</div>
							</td>
						</tr>
					  )})}
					</tbody>
				</table>
				<div className={headScss.foots}>
		<p className={headScss.p1}>购物车信息</p>
		<table>
			<thead>
				<tr>
					<th>id</th>
					<th>名称</th>
					<th>价格</th>
					<th>数量</th>
					<th>小计</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody>
					  {this.state.arr.map((item,key)=>{return(
					  	<tr>
							<td>{item.id}</td>
							<td>{item.name}</td>
							<td>{item.price}</td>
							<td>{item.num}</td>
							<td>{item.num * item.price}</td>
							<td>
								<div className={headScss.down}>
									<div onClick={()=>{this.add(key,item.id)}}>+</div>
									<div onClick={()=>{this.cut(key,item.id)}}>-</div>
									<div onClick={()=>{this.del(key,item.id)}}>x</div>
								</div>
							</td>
						</tr>
					  )})}
					</tbody>
		</table>
		<div className={headScss.p2}>
			<div>总数: <span>{this.allnum()}</span></div>
			<div>总价: <span>{this.allprice()}</span></div>
			<div className={headScss.kong} onClick={()=>{this.remove()}}>清空购物车</div>
		</div>
	</div>
			</div>
   	)
   }

}

ReactDOM.render(<App/>,document.getElementById('app'))
